<template>
    <div class="hero-list-container">
        <el-button class="btn-pos"
                   type="primary"
                   icon="el-icon-upload"
                   size="small"
                   @click="goAdd">补录</el-button>
        <el-table
                :data="listData"
                style="width: 100%">
            <el-table-column
                    label="贴图"
                    width="180">
                <template slot-scope="scope">
                    <img :src="scope.row.avatarSrc" alt="" width="48">
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hp"
                    label="血量"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="goDetail(scope.$index, scope.row)">查看</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="goUpdate(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "ForgeHeroList",
        data(){
            return{
                listData : []
            }
        },
        activated(){
            this.fetchListData();
        },
        methods: {
            fetchListData() {
                this.axios.get('/activity',{
                    params : {
                        type : "FORGE"
                    }
                })
                    .then(res=>{
                        this.listData = res.data;
                    })
            },
            goAdd(){
                // 不传id时为新增
                this.$router.push('/ForgeHeroUpdate');
            },
            goDetail(index,row){
                this.$router.push({
                    path : '/ForgeHeroDetail',
                    query : {
                        id : row._id
                    }
                })
            },
            goUpdate(index,row){
                this.$router.push({
                    path : '/ForgeHeroUpdate',
                    query : {
                        id : row._id
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .hero-list-container{
        position: relative;
        padding: 16px;
        .btn-pos{
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 1;
        }
    }
</style>